<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="resources/js/selectJs/select2.css" rel="stylesheet"/>
<script src="resources/js/selectJs/select2.js"></script>
<script src="resources/js/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("select[name=co_id]").select2();
});

function previewImg2(targetObj, previewId) {
    var preview = document.getElementById(previewId);
    var ua = window.navigator.userAgent;
    
    if (ua.indexOf("MSIE") > -1) {
    	var src;
    	
    	if(navigator.appVersion.indexOf("MSIE 1") > -1) {
        	previewNotIE(targetObj, previewId);
        	return;
    	}else if(navigator.appVersion.indexOf("MSIE 9") > -1) {
    		return;
    		
    	}else{
    		src = document.selection.createRange().text;
    	}
    	
        targetObj.select();
        
        var ie_preview_error = document
                    .getElementById("ie_preview_error_" + previewId);

        if (ie_preview_error) {
            preview.removeChild(ie_preview_error);
        }

        var img = document.getElementById(previewId);
        img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"
                    + src + "', sizingMethod='scale')";
            
        var hiddenPreview = document.getElementById("hiddenP");
        hiddenPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"
            + src + "', sizingMethod='image')";
        $("#bigPreview").css("filter", img.style.filter );
        $("#hiddenP").css("width", "1px");
        $("#hiddenP").css("height", "1px");
        $("#"+previewId+"_size").html( $("#hiddenP").css("width") + " x " + $("#hiddenP").css("height") );
            
    } else {
    	previewNotIE(targetObj, previewId);
    }
}
	
	//IE 외 브라우저 처리.
	function previewNotIE(targetObj, previewId) {
		var preview = document.getElementById(previewId);
		
		var files = targetObj.files;
		
        for ( var i = 0; i < files.length; i++) {

            var file = files[i];

            var imageType = /image.*/;
            if (!file.type.match(imageType))
                continue;

            var prevImg = document.getElementById("prev_" + previewId);
            if (prevImg) {
                preview.removeChild(prevImg);
            }

            var img = document.createElement("img");
            img.id = "prev_" + previewId;
            img.classList.add("obj");
            img.file = file;
            img.style.width = '120px';
            img.style.height = '120px';
            
            preview.appendChild(img);
            
            $("#bigPreview").html(
            	"<img id='bigImg' style='width:320px;height:320px;' />"
            );
            
            if (window.FileReader) {
                var reader = new FileReader();
                reader.onloadend = (function(aImg) {
                    return function(e) {
                        aImg.src = e.target.result;
                        $("#bigImg").attr("src", e.target.result);
                        var imageForSize = new Image();
                        imageForSize.onload = function() {
                        	$("#"+previewId+"_size").html( this.width + " x " + this.height );
                        };
                        imageForSize.src = e.target.result;
                    };
                })(img);
                reader.readAsDataURL(file);
            } else {
                if (!document.getElementById("sfr_preview_error_"
                        + previewId)) {
                    var info = document.createElement("p");
                    info.id = "sfr_preview_error_" + previewId;
                    info.innerHTML = "not supported FileReader";
                    preview.insertBefore(info, null);
                }
            }
        }
	}
	
	function mousePreview( num ) {
		var ua = window.navigator.userAgent;
		if ( ua.indexOf("MSIE") > -1 ) {
			if(navigator.appVersion.indexOf("MSIE 1") > -1) {
				$("#bigImg").attr("src", $("#prev_preview"+num ).attr("src") );
			} else {
				$("#bigPreview").css("filter", $("#preview"+num ).css("filter") );
			}
			
		} else {
			$("#bigImg").attr("src", $("#prev_preview"+num ).attr("src") );
		}
	}
	
	function fileClear( imgId ) {
		var ua = window.navigator.userAgent;
		if ( ua.indexOf("MSIE") > -1 ) {
			var thisObj = $("#"+imgId);
			thisObj.select();
			document.selection.clear();
		} else {
			$("#"+imgId).val("");
		}
	}
	
	function pageCtr( pageNum ) {
		$("#page1").css("display","none");
		$("#page2").css("display","none");
		$("#page" + pageNum).css("display","block");
	}
	
	function autoPublicTax( obj ) {
		var id = "gift" + obj.name.substring(4,5) + "_publicTax";
		var value = parseInt(obj.value * 22.0 / 100);
		var tempValue = value.toString();
		var lastValue = tempValue.substring(0,tempValue.length - 1) + "0";
		$("#"+id).val( lastValue );
	}
	
	function checkInput() {
		if ( $("input[name=title]").val() == "" ) {
			alert("제목을 입력하세요.");
			return false;
		} else if ( $("textarea[name=info]").val() == "" ) {
			alert("설명을 입력하세요.");
			return false;
		} else if ( $("#img1").val() == "" ) {
			alert("메인이미지 파일을 등록하세요.");
			return false;
		} else if ( $("#img2").val() == "" ) {
			alert("디테일1번 파일을 등록하세요.");
			return false;
		} else if ( $("#img3").val() == "" ) {
			alert("디테일2번 파일을 등록하세요.");
			return false;
		} else if ( $("#img4").val() == "" ) {
			alert("디테일3번 파일을 등록하세요.");
			return false;
		} else if ( $("input[name=gifttitle]").val() == "" ) {
			alert( "경품 Title을 입력하세요.");
			return false;
		} else if ( $("input[name=gift1]").val() == "" ) {
			alert( "경품명(대표)를 입력하세요.");
			return false;
		} else if ( $("input[name=gift1_price]").val() == "" ) {
			alert( "경품(대표)의 가격을 입력하세요." );
			return false;
		} else if ( $("#img5").val() == "" ) {
	        alert( "경품(대표) 이미지를 선택하세요.");
	        return false;
		} else if ( $("input[name=gift2]").val() != "" && $("input[name=gift2_price]").val() == "" ) {
			alert( "두번째 경품의 가격을 입력하세요." );
			return false;
		} else if ( $("input[name=gift3]").val() != "" && $("input[name=gift3_price]").val() == "" ) {
            alert( "세번째 경품의 가격을 입력하세요." );
            return false;
		}
		if ( $("input[name=gift2]").val() == "" && $("input[name=gift2_price]").val() == "" ) {
            $("input[name=gift2_price]").val( 0 );
		}
		if ( $("input[name=gift3]").val() == "" && $("input[name=gift3_price]").val() == "" ) {
            $("input[name=gift3_price]").val( 0 );
        }
		return true;
	}
	
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>

<form action="regContents.ga" method="post" enctype="multipart/form-data" autocomplete="off" onsubmit="return checkInput()">

<!-- page1 -->
<div id="page1">
<h2>광고 Contents 등록</h2>
<table width="700px" bgcolor="#eeeeee">
			<tr>
				<td width="12%">광고주 선택</td>
				<td>
					<select name="co_id" style="width:260px;">
						<c:forEach var="list" items="${resultList }">
							<option value="${list.id }">${list.coname }</option>
						</c:forEach>
					</select>
				</td>
			</tr>
</table>
<br/>

<table width="700px" cellpadding="3" cellspacing="0">
	<tr>
		<td>광고 아이디</td>
		<td><input type="text" value="ID 자동부여" disabled/></td>
	</tr>
	<tr>
		<td>광고 Title</td>
		<td><input type="text" name="title"/></td>
	</tr>
	<tr>
		<td>설명</td>
		<td><textarea rows="8" cols="70" name="info" style="resize:none;"></textarea></td>
	</tr>
</table>
<br/>

<h3>■ 광고에 사용될 이미지를 선택하세요.</h3>

<div id="left" style="float:left;width:410px;height:336px;">
<table cellpadding="3" cellspacing="0" width="400px">
	<tr>
		<td colspan="2">경품 Main 이미지</td>
	</tr>
	<tr>
		<td width="26%" class="table_titleHeight">300 x 300</td>
		<td><input type="file" name="files[0]" id="img1" onchange="previewImg2(this,'preview1')" onclick="fileClear('img1')"/></td>
	</tr>
</table>
<br/>

<table cellpadding="3" cellspacing="0" width="400px">
	<tr>
		<td colspan="2">Ad Detail 이미지</td>
	</tr>
	<tr>
		<td width="26%" class="table_titleHeight">540 x 960</td>
		<td><input type="file" name="files[1]" id="img2" onchange="previewImg2(this,'preview2')" onclick="fileClear('img2')"/></td>
	</tr>
	<tr>
		<td class="table_titleHeight">540 x 960</td>
		<td><input type="file" name="files[2]" id="img3" onchange="previewImg2(this,'preview3')" onclick="fileClear('img3')"/></td>
	</tr>
	<tr>
		<td class="table_titleHeight">540 x 960</td>
		<td><input type="file" name="files[3]" id="img4" onchange="previewImg2(this,'preview4')" onclick="fileClear('img4')"/></td>
	</tr>
</table>
<br/>
</div>

<div id="bigPreview" style="width:336px;height:336px;float:left;"></div>
<br/><br style="clear:both;"/>

<table>
	<tr>
		<td><div id="preview1" class="previewDiv" onmouseover="mousePreview(1)"></div></td>
		<td><div id="preview2" class="previewDiv" onmouseover="mousePreview(2)"></div></td>
		<td><div id="preview3" class="previewDiv" onmouseover="mousePreview(3)"></div></td>
		<td><div id="preview4" class="previewDiv" onmouseover="mousePreview(4)"></div></td>
	</tr>
	<tr>
		<td>썸네일</td>
		<td>디테일1</td>
		<td>디테일2</td>
		<td>디테일3</td>
	</tr>
	<tr>
		<td><div id="preview1_size"></div></td>
		<td><div id="preview2_size"></div></td>
		<td><div id="preview3_size"></div></td>
		<td><div id="preview4_size"></div></td>
	</tr>
</table>
<br/>

<div style="width:700px;text-align:right;">
	<input type="button" value="다음 ▶" style="width:120px;" onclick="pageCtr(2)"/>
</div>

</div>

<!-- page2 -->
<div id="page2" style="display:none;">
	<h2>경품 등록(게임에 적용될 이미지)</h2>
	■ 경품 Title &nbsp;&nbsp;
	<input type="text" name="gifttitle" style="width:300px;"/>
	<br/><br/>
	
	<table cellspacing="0" cellpadding="5" style="width:400px;border:1px solid #bbbbbb;">
		<tr>
			<td class="table_titleHeight">경품명 입력*</td>
			<td><input type="text" name="gift1" style="width:220px;"/></td>
		</tr>
		<tr>
          <td class="table_titleHeight">상품 가격</td>
          <td><input type="text" name="gift1_price" style="width:220px;" onchange="autoPublicTax(this)"/></td>
        </tr>
        <tr>
          <td class="table_titleHeight">제세공과금 &nbsp; <font color="#777777">22%</font></td>
          <td><input type="text" id="gift1_publicTax" style="width:220px;background:#eeeeee;" readOnly/></td>
        </tr>
		<tr>
			<td width="35%" class="table_titleHeight">180 x 180</td>
			<td width="65%"><input type="file" name="giftfiles[0]" id="img5"/></td>
		</tr>
	</table>
	<br/><br/>
	
	<table cellspacing="0" cellpadding="5" style="width:400px;border:1px solid #bbbbbb;">
		<tr>
			<td class="table_titleHeight">경품명 입력</td>
			<td><input type="text" name="gift2" style="width:220px;"/></td>
		</tr>
		<tr>
		  <td class="table_titleHeight">상품 가격</td>
		  <td><input type="text" name="gift2_price" style="width:220px;" onchange="autoPublicTax(this)"/></td>
		</tr>
		<tr>
		  <td class="table_titleHeight">제세공과금 &nbsp; <font color="#777777">22%</font></td>
		  <td><input type="text" id="gift2_publicTax" style="width:220px;background:#eeeeee;" readOnly/></td>
		</tr>
        <tr>
            <td width="35%" class="table_titleHeight">180 x 180</td>
            <td width="65%"><input type="file" name="giftfiles[1]" id="img6"/></td>
        </tr>
    </table>
    <br/><br/>
    
    <table cellspacing="0" cellpadding="5" style="width:400px;border:1px solid #bbbbbb;">
        <tr>
            <td class="table_titleHeight">경품명 입력</td>
            <td><input type="text" name="gift3" style="width:220px;"/></td>
        </tr>
        <tr>
          <td class="table_titleHeight">상품 가격</td>
          <td><input type="text" name="gift3_price" style="width:220px;" onchange="autoPublicTax(this)"/></td>
        </tr>
        <tr>
          <td class="table_titleHeight">제세공과금 &nbsp; <font color="#777777">22%</font></td>
          <td><input type="text" id="gift3_publicTax" style="width:220px;background:#eeeeee;" readOnly/></td>
        </tr>
        <tr>
            <td width="35%" class="table_titleHeight">180 x 180</td>
            <td width="65%"><input type="file" name="giftfiles[2]" id="img7"/></td>
        </tr>
    </table>
    <br/><br/>

<div style="width:700px;text-align:right;">
    <input type="button" value="◀ 이전" style="width:120px;" onclick="pageCtr(1)"/>
    <input type="submit" value="등록하기" class="bigBtn"/>
</div>

</div>
<!-- page2 끝 -->

</form>

<div id="hiddenP" style="display:none;"></div>

</body>
</html>